<template>
  <div id="drag-parent" class="drag-parent relative w-full h-full" @mousedown="parentMousedown">
    <VueDraggable
      v-for="item in currentStage.components"
      v-show="item.show"
      :id="item.id"
      :key="item.id"
      v-model:w="item.w"
      v-model:h="item.h"
      v-model:x="item.x"
      v-model:y="item.y"
      :scale="currentStage.scale"
      :parent="item.parent"
      :z="item.z"
      :axis="item.axis"
      :min-height="item.minHeight"
      :min-width="item.minHeight"
      :disable-user-select="item.disableUserSelect"
      :lock-aspect-ratio="item.lockAspectRatio"
      :class="['drag-item']"
      class-name-active="drag-active"
      :handles="item.handles"
      :data-id="item.id"
      data-shape
      :draggable="item.draggable && !stageConfig.draggable && !item.lock && !item.edit"
      :resizable="!item.lock && item.resizable"
      @activated="activated(item)"
      @mouseup="mouseup"
      @deactivated="deactivated"
      @on-contextmenu="createContextmenu(item)"
    >
      <div v-if="stageConfig.showOutline" class="auxiliary-line w-full h-full"></div>
      <!-- 矩形 -->
      <div v-if="item.type === 'rect'" data-shape="rect" :style="componentStyle(item)"></div>
      <!-- 视频类型 -->
      <div
        v-if="item.type === 'video'"
        data-shape
        class="flex-center"
        :style="componentStyle(item)"
        @dblclick="setVideo"
      >
        <video
          v-if="!!item.src"
          autoplay
          :width="item.w"
          :height="item.h"
          :src="item.src"
          :controls="true"
          controlslist="nodownload"
          class="data-shape"
        >
          <source :key="item.src" />
        </video>
        <div v-else class="no-video flex justify-center items-center">
          <PlusOutlined />
        </div>
      </div>
      <!-- 文字 -->
      <div
        v-if="item.type === 'text'"
        :class="[item.textPosition, 'h-full', 'w-full']"
        :style="getTextStyle(item)"
        @dblclick="onDblClick(item)"
      >
        <div v-if="!item.edit" :style="getTextStyle(item)" v-text="item.text"></div>
        <textarea
          v-else
          v-model="item.text"
          :style="getTextStyle(item)"
          @blur="onTextBlur(item)"
          @focus="onTextFocus(item)"
          class="w-full h-full"
        ></textarea>
      </div>

      <!-- 动态文字 -->
      <div
        v-if="item.type === 'd-text'"
        :class="[item.textPosition, 'h-full', 'w-full']"
        :style="getTextStyle(item)"
        @dblclick="onDblClick(item)"
      >
        <div v-if="!item.edit" class="w-fit h-fit">
          {{ item.text }}
        </div>
        <textarea
          v-else
          v-model="item.text"
          :style="getTextStyle(item)"
          @blur="onTextBlur(item)"
          @focus="onTextFocus(item)"
        ></textarea>
      </div>

      <!-- 二维码 -->
      <div
        v-if="item.type === 'qrcode'"
        :style="(componentStyle(item), { backgroundImage: `url(${item.src})` })"
        class="w-full h-full bgimage"
      ></div>
      <!-- 动态二维码 -->
      <div v-if="item.type === 'd-qrcode'" class="d-qrcode shape" :style="componentStyle(item)">
        <QrcodeOutlined />
      </div>
      <!-- 条形码 -->
      <div
        v-if="item.type === 'barcode'"
        :style="
          (componentStyle(item),
          {
            backgroundImage: `url(${item.src})`,
          })
        "
        class="shape"
      ></div>
      <!-- 动态条形码 -->
      <div
        v-if="item.type === 'd-barcode'"
        data-shape="d-barcode"
        class="flex justify-center items-center d-barcode"
        :style="componentStyle(item)"
      ></div>
      <!-- 图片 -->
      <div v-if="item.type === 'image'" :style="componentStyle(item)" class="flex-center">
        <!-- 没有图片 -->
        <div v-if="!item.cacheSrc" class="flex-center" @dblclick="setImage">
          <PlusOutlined />
        </div>
        <div v-else :style="{ transform: `rotate(${item.rotate}deg)` }" @dblclick="setImage">
          <img :src="item.cacheSrc" class="w-full h-full" style="object-fit: cover" />
        </div>
      </div>
      <!-- 动态图片 -->
      <div v-if="item.type === 'd-image'" :style="componentStyle(item)">
        <FileImageOutlined></FileImageOutlined>
      </div>
      <!-- 动态视频 -->
      <div
        v-if="item.type === 'd-video'"
        class="flex w-full h-full justify-center items-center"
        :style="componentStyle(item)"
      >
        <VideoCameraOutlined></VideoCameraOutlined>
      </div>
    </VueDraggable>
    <!-- position -->
  </div>
</template>

<script setup lang="ts">
import VueDraggable from 'draggable-resizable-vue3';
import '../../style/shape.scss';
import { setImage, setVideo } from './shape-config/image.event';
import { getTextStyle, onDblClick, onTextBlur, onTextFocus } from './shape-config/text.event';
import type { CSSProperties } from 'vue';
import { currentShape, addIdInSet } from '../../data/shapes';
import { setComponentMode, stageConfig, propMode, currentStage } from '../../data/stage';
import { updateShape } from '../../event/shape.actions';
import type { IShapeProps } from '../../types/IShape';
import { setMenuData, shapeContextmenu } from '../../data/contextmenu';
import { FileImageOutlined, QrcodeOutlined, VideoCameraOutlined } from '@ant-design/icons-vue';

/**
 * 注释: 激活触发
 *
 * */
const activated = (item: IShapeProps) => {
  currentShape.value = item;
  addIdInSet(item);
  /* 设置成组件模式 */
  setComponentMode();
  stageConfig.value.showSize = true;
};
const mouseup = () => {
  updateShape(currentShape.value);
};
const deactivated = () => {
  stageConfig.value.showSize = false;
};
const componentStyle = (item: IShapeProps): CSSProperties => {
  return {
    outlineColor: item.borderColor,
    border: item.hasBorder ? `1px solid ${item.borderColor} !important` : 'none',
    backgroundColor: item.bgcolor,
  };
};
const createContextmenu = (shape: IShapeProps) => {
  currentShape.value = shape;
  setMenuData(shapeContextmenu.value);
};

const parentMousedown = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  propMode.value = target.id === 'drag-parent';
};
</script>

<style lang="scss" scoped>
@import './style';
</style>
